import { useState } from 'react';
import './index.less';
import { Table, Typography, Space, Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
import { Dropdown, Form, Input, Select, DatePicker } from 'antd';

import { DownOutlined } from '@ant-design/icons';
const { Search } = Input;
const { RangePicker } = DatePicker;

const items = [
  {
    key: '1',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印设置
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印列表
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.antgroup.com"
      >
        打印单据
      </a>
    ),
  },
];

const initialLittle = [
  {
    id: '1',
    number: 'QCSK2021030006',
    username: '大同首钢冷轧蒋板',
    receivableAmount: 1000,
    receivableDate: '2022-02-14',
    sale: '肖晴',
    make: '张妍',
    relation: '关联测试',
  },
  {
    id: '2',
    number: 'QCSK2021030006',
    username: '大同首钢冷轧蒋板',
    receivableAmount: 2000,
    receivableDate: '2022-02-14',
    sale: '肖晴',
    make: '张妍',
    relation: '关联测试',
  },
  {
    id: '3',
    number: 'QCSK2021030006',
    username: '大同首钢冷轧蒋板',
    receivableAmount: 1500,
    receivableDate: '2022-02-14',
    sale: '肖晴',
    make: '张妍',
    relation: '关联测试',
  },
];

export default function IndexPage(props) {
  // console.log(props);
  const [form] = Form.useForm();
  // 列表
  const [data, setData] = useState(initialLittle);
  // 查找
  const onFinish = (values) => {
    console.log(values);
  };
  // 搜索
  const onSearch = (values) => {
    console.log(values);
  };
  // 列表结构
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 80,
    },
    {
      title: '单据编号',
      dataIndex: 'number',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
    {
      title: '客户名称',
      dataIndex: 'username',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
    {
      title: '应收金额',
      dataIndex: 'receivableAmount',
    },
    {
      title: '应收日期',
      dataIndex: 'receivableDate',
    },
    {
      title: '销售人员',
      dataIndex: 'sale',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
    {
      title: '制单人员',
      dataIndex: 'make',
    },
    {
      title: '关联项目',
      dataIndex: 'relation',
      render: (col) => {
        return <a>{col}</a>;
      },
    },
  ];
  const onSelectChange = (selectedRowKeys) => {
    setSelected(selectedRowKeys.length);
  };
  const rowSelection = {
    onChange: onSelectChange,
  };

  function summary(currentData) {
    return (
      <Table.Summary.Row>
        <Table.Summary.Cell>合计</Table.Summary.Cell>
        <Table.Summary.Cell>
          <Typography.Text type="success" bold>
            {currentData.reduce(
              (prev, next) => prev + next.receivableAmount,
              0,
            )}
          </Typography.Text>
        </Table.Summary.Cell>
      </Table.Summary.Row>
    );
  }
  const [selectedRowKeys, setSelectedRowKeys] = useState(['4']);

  const [pagination, setPagination] = useState({
    sizeCanChange: true,
    showTotal: true,
    total: 96,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });

  function onChangeTable(pagination) {
    const { current, pageSize } = pagination;
    console.log(current, pageSize);
    setPagination((pagination) => ({ ...pagination, current, pageSize }));
  }

  return (
    <div className="receivables">
      <div className="buts">
        <button>新增</button>
        <button className="but">修改</button>
        <button className="but">删除</button>
        <button className="but">过滤</button>
        <button className="but">还原</button>
        <button className="but">
          <Dropdown
            menu={{
              items,
            }}
          >
            <div onClick={(e) => e.preventDefault()}>
              <Space>
                打印
                <DownOutlined />
              </Space>
            </div>
          </Dropdown>
        </button>
        <button className="but">导入</button>
        <button className="but">导出</button>
        <button className="but">查看日历</button>
      </div>
      <Form onFinish={onFinish} form={form} name="control-hooks">
        <Form.Item
          label="关联项目："
          name="relation"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="客户名称："
          name="username"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请输入" onSearch={onSearch} />
        </Form.Item>
        <Form.Item
          label="应收日期："
          name="receivableDate"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <RangePicker />
        </Form.Item>
        <Form.Item
          label="销售人员："
          name="handle"
          style={{ display: 'inline-block', marginLeft: '20px' }}
        >
          <Search placeholder="请输入" onSearch={onSearch} />
        </Form.Item>

        <Button
          style={{
            marginLeft: '20px',
            color: 'rgb(12, 33, 50)',
            background: 'linear-gradient(#e7effb, #f5faff)',
          }}
          type="primary"
          htmlType="submit"
        >
          查询
        </Button>
      </Form>
      <h2>预收款列表</h2>
      <Table
        rowKey="id"
        columns={columns}
        data={data}
        pagination={pagination}
        summary={summary}
        onChange={onChangeTable}
        stripe={true}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
            console.log('onChange:', selectedRowKeys, selectedRows);
            setSelectedRowKeys(selectedRowKeys);
          },
          onSelect: (selected, record, selectedRows) => {
            console.log('onSelect:', selected, record, selectedRows);
          },
        }}
      />
    </div>
  );
}
